<template>
  <div>
    <Header title="个人资料"><i class="el-icon-arrow-left" @click="$global.goPage('/mine')"></i>
      <el-link v-if="isModify" @click="changeModify">修改</el-link>
      <el-link v-else @click="editInfo">保存</el-link>
    </Header>
    <el-container>
      <el-form :model="InfoForm" :rules="InfoRules" ref="InfoFormRef" :disabled="isModify">
        <el-form-item class="avatar">
          <el-upload class="avatar_img" action="/api/user/upload"
                     :show-file-list="false" name="image" :on-success="handleAvatarSuccess" v-model="InfoForm.head">
            <img v-if="InfoForm.head" :src="InfoForm.head" class="img"/>
            <i v-else class="el-icon-camera"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="username" >
          <el-input v-model="InfoForm.username" disabled>
            <template slot="prepend">用户名</template></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="InfoForm.nickname" placeholder="请填写昵称">
            <template slot="prepend">昵称</template></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input v-model="InfoForm.password" type="password" show-password placeholder="请填写密码">
            <template slot="prepend">密码</template></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="InfoForm.email" placeholder="请填写邮箱"><template slot="prepend">邮箱</template></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="InfoForm.mobile" placeholder="请填写手机号"><template slot="prepend">手机号</template></el-input>
        </el-form-item>
        <el-form-item>

          <el-select v-model="InfoForm.gender" placeholder="请选择" style="width: 100%" label="性别">
            <div slot="prefix"  class="el-input-group__prepend sex">性别</div>
            <el-option label="保密" :value="0"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-container>
  </div>
</template>

<script>
import Header from "../../components/Header";
import {mapState} from "vuex";

export default {
  name: "modify",
  components: {Header},
  data() {
    return {
      isModify:true,
      InfoForm: {head:''}
    }
  },
  computed: {...mapState({InfoRules: state => state.UserRules,id:state=>state.user.id})},
  created() {
    this.getInfo()
  },
  methods: {
    handleAvatarSuccess(res) {
      this.InfoForm.head=res
    },
    changeModify(){
      this.isModify=!this.isModify
    },
    async getInfo() {
      const res = await this.$http.post('api/user/search?id=' +this.id)
      console.log(res)
      if (res.data.status === 200) {
        this.InfoForm = res.data.data
      } else {
        this.$message.error('加载失败')
      }
    },
    editInfo() {
      this.$refs.InfoFormRef.validate(async (valid) => {
        if (valid) {
          const edit = await this.$http.put('api/user/edit?id=' +this.id,this.InfoForm)
          if (edit.data.status !== 200) {
            this.$message.error(edit.data.msg)
          }
          console.log(edit)
          this.$message.success('修改成功')
          this.$store.dispatch('user/Login',this.InfoForm)
          this.$global.goPage("./mine")

        } else {
          return this.$message.error('请按规定填写')
        }
      })
    }
  }
}
</script>

<style scoped>
.avatar{
  padding: 10px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}
.avatar_img{
  width: 90px;
  height: 90px;
  border-radius: 50px;
  background: gray;
}
.avatar_img img{
  width: 90px;
  height: 90px;
  border-radius: 50px;
  z-index: 3;
}
.avatar_img i{
  font-size: 25px;
  color: #0C0C0C;
 position: absolute;
  left: 32px;
  bottom: 30px;
}
/deep/ .el-upload{
  height: 90px;
}
/deep/ .el-input__prefix{
  left:-1px;
  top:-1px;
}
/deep/ .el-input--prefix .el-input__inner{
  padding-left: 80px;
}
</style>
